import React, {Component} from 'react'
import TalentVM from 'cvm/home/talent'
import { observer } from 'mobx-react/custom'

const Tabs = observer(({ vm }) => {
  return (
    <div className='flex-wrap talent-box'>
      <div onClick={() => vm.handleSelect(true)}
        className={vm.weekBtnStyle}>
        周达人
      </div>
      <div onClick={() => vm.handleSelect(false)}
        className={vm.monthBtnStyle}>
        月达人
      </div>
    </div>
  )
})

const Page = observer(({ vm }) => {
  if (!vm.data || vm.data.length === 0) return <div />
  return (
    <div>
      <div className='background-box'>
        <div>
          <div className='talent-img-header'>
            <div className='inner-round'>
              <div className='crown-box'>
                <img src={require('images/crown.png')} alt='' />
              </div>
              <img src={vm.data[0].Headimgurl} alt='' className='header' />
            </div>
          </div>
          <div className='top-name'>{vm.data[0].NickName}</div>
        </div>
        <div className='ranking-list'>
          <p>{vm.title}</p>
          <div className='list-ranking-box'>
            {vm.data.map((item, index) => {
              return (
                <div key={index} className='flex-wrap list-ranking'>
                  <div className='flex-1 box-1'>
                    {index === 0 ? <span className='first'>{index + 1}</span> : <span className='other'>{index + 1}</span>}
                  </div>
                  <div className='flex-3 box-2'>
                    <img src={item.Headimgurl} alt='' />
                    {item.NickName}
                  </div>
                  <div className='flex-2 box-3'>{item.TotalBean}</div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
})

@observer
export default class Talent extends Component {
  vm = new TalentVM(this.props)
  constructor (props) {
    super(props)
    window.document.title = '达人'
  }
  render () {
    return (
      <div>
        <Tabs vm={this.vm} />
        <Page vm={this.vm} />
      </div>
    )
  }
}
